<template>
	<view ref="nvueElAni" v-if="showValue" class="fixed l-0 t-0 flex flex-row flex-row-center-center on"
		:class="[showMask ? 'overflowMask' : 'overflowMaskNo']"
		:style="{ width: sysinfo.width + 'px', height: sysinfo.height + 'px', top: 0 + 'px' }">
		<zh-sheet v-if="showValue" :style="{ transform: isNvue ? 'scale(0,0)' : 'scale(1,1)' }" ref="nvueElAniContent"
			class="scale nvueContent" :_style="props._style" :_class="props._class" :color="bgColor" :border="0"
			:shadow="10" :width="props.width" :height="props.height" :margin="[40, 40]" :round="props.round"
			:padding="props.padding">
			<slot>
				<view class="flex flex-center flex-col ma-30" style="line-height: normal">
					<tm-icon _style="line-height: normal" style="line-height: normal" _class="pa-10"
						:spin="model_ref == 'load'" :color="color_ref" :fontSize="72" :name="icon_ref"></tm-icon>
					<zh-text :font-size="30" :_class="`pt-8 text-overflow-${lines_ref}`" :label="text_ref"></zh-text>
				</view>
			</slot>
		</zh-sheet>
	</view>
</template>

<script lang="ts" setup>
	/**
 * 消息提示
 * @description 消息提示，属于全局阻断式提醒，会打断用户操作。
 */
	import { language } from '@/tool/lib/language'
	import { config, modelType } from './interface'
	import systemConfigStore from '@/store/modules/systemConfigStore';
	import { getCurrentInstance, computed, ref, provide, inject, ComponentInternalInstance, onUnmounted, nextTick, watch, Ref, PropType } from 'vue'
	import { useWindowInfo } from '@/tool/useFun/useWindowInfo'
	// #ifdef APP-PLUS-NVUE
	const Binding = uni.requireNativePlugin('bindingx')
	const dom = uni.requireNativePlugin('dom')
	const animation = uni.requireNativePlugin('animation')
	// #endif
	const store = systemConfigStore();
	const tranAni = ref<any>(null)
	const Overlay = ref<any>(null)
	const emits = defineEmits(['click'])
	const proxy = getCurrentInstance()?.proxy ?? null

	const props = defineProps({
		//自定义的样式属性
		_style: {
			type: [Array, String, Object],
			default: () => { }
		},
		round: {
			type: Number,
			default: 12
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [24, 0]
		},
		//自定义类名
		_class: {
			type: [Array, String],
			default: 'flex-center'
		},
		//是否显示遮罩
		mask: {
			type: [Boolean],
			default: true
		},
		//自动关闭时,需要显示多久关闭,单位ms
		duration: {
			type: Number,
			default: 1500
		},
		width: {
			type: Number,
			default: 300
		},
		height: {
			type: Number,
			default: 300
		},
		lines: {
			type: Number,
			default: 3
		}
	})

	const sysinfo = useWindowInfo()

	const _lines = computed(() => props.lines)
	let isNvue = ref(false)
	// #ifdef APP-NVUE
	isNvue.value = true
	// #endif

	const dur = ref(props.duration)
	let uid : number = NaN
	const bgColor = ref('white')
	const model_ref : Ref<modelType> = ref('info')
	const showValue = ref(false)
	const icon_ref = ref('')
	const text_ref = ref('')
	const color_ref = ref('')
	const showMask = ref(props.mask)
	const dark_ref = ref(false)
	const lines_ref = ref(_lines.value)

	const modelIcon = computed(() => {
		return {
			load: {
				icon: 'tmicon-loading',
				color: 'primary',
				text: language('message.load.text')
			},
			error: {
				icon: 'tmicon-times-circle',
				color: 'red',
				text: language('message.error.text')
			},
			info: {
				icon: 'tmicon-info-circle',
				text: language('message.info.text'),
				color: 'black'
			},
			warn: {
				icon: 'tmicon-exclamation-circle',
				text: language('message.warn.text'),
				color: 'orange'
			},
			quest: {
				icon: 'tmicon-question-circle',
				text: language('message.quest.text'),
				color: 'pink'
			},
			success: {
				icon: 'tmicon-check-circle',
				text: language('message.success.text'),
				color: 'green'
			},
			disabled: {
				icon: 'tmicon-ban',
				text: language('message.disabled.text'),
				color: 'red'
			},
			wait: {
				icon: 'tmicon-ios-alarm',
				text: language('message.wait.text'),
				color: 'black'
			}
		}
	})

	function show(argFs : config) {
		if (showValue.value || !isNaN(uid)) {
			showValue.value = false
			clearTimeout(uid)
			nextTick(() => {
				showAction(argFs)
			})
		} else {
			showAction(argFs)
		}
	}
	function showAction(argFs : config) {
		//显示所需要的参数
		let arg = argFs || {}
		let { duration, icon, text, color, dark, model, mask, lines } = arg
		model_ref.value = typeof model == 'undefined' ? model_ref.value : model
		icon_ref.value = icon = icon ?? modelIcon.value[model_ref.value].icon
		text_ref.value = text = text ?? modelIcon.value[model_ref.value].text
		color_ref.value = color = color ?? modelIcon.value[model_ref.value].color
		showMask.value = typeof mask === 'boolean' ? mask : showMask.value
		lines_ref.value = lines ?? _lines.value

		if (dark === true) {
			bgColor.value = 'black'
		}
		if (typeof dark !== 'boolean') {
			dark = store.dark
		}
		if (color_ref.value == 'white' || color_ref.value == 'black') {
			color_ref.value = ''
		}

		dark_ref.value = dark
		if (typeof duration === 'undefined') {
			duration = props.duration
		}
		dur.value = isNaN(parseInt(String(duration))) ? 1500 : parseInt(String(duration))
		showValue.value = true
		// #ifdef APP-NVUE
		setTimeout(function () {
			showNvueAniMation()
		}, 50)
		// #endif
		if (model_ref.value != 'load') {
			uid = setTimeout(function () {
				showValue.value = false
				uid = NaN
			}, dur.value)
		}
	}

	function showNvueAniMation() {
		var el = proxy.$refs.nvueElAni
		var elContent = proxy.$refs.nvueElAniContent
		animation.transition(
			el,
			{
				styles: {
					backgroundColor: 'rgba(0,0,0,0)',
					transformOrigin: 'center center'
				},
				duration: 1, //ms
				timingFunction: 'ease',
				delay: 0 //ms
			},
			() => {
				animation.transition(
					el,
					{
						styles: {
							backgroundColor: 'rgba(0,0,0,0.3)',
							transformOrigin: 'center center'
						},
						duration: 220, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					() => { }
				)
			}
		)
		animation.transition(
			elContent,
			{
				styles: {
					opacity: 1,
					transform: 'scale(1,1)',
					transformOrigin: 'center center'
				},
				duration: 220, //ms
				timingFunction: 'ease',
				delay: 0 //ms
			},
			() => { }
		)
	}

	//隐藏
	function hide() {
		showValue.value = false
		uid = NaN
		clearTimeout(uid)
	}
	defineExpose({
		show: show,
		hide: hide
	})
</script>

<style scoped>
	.overflowMask {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 1000 !important;
		animation: aniover 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
		transition-duration: 0.5s;
		transition-property: background, transform;
		transition-timing-function: ease;
		transition-delay: 0.3s;
		/* #endif */
		/* #ifdef APP-NVUE */
		background-color: rgba(0, 0, 0, 0);
		/* #endif */
	}

	.overflowMaskNo {
		/* #ifndef APP-NVUE */
		z-index: 1000 !important;
		background-color: rgba(0, 0, 0, 0);
		/* #endif */
	}

	.nvueContent {
		/* #ifdef APP-NVUE */
		opacity: 0;
		/* #endif */
	}

	.scale {
		/* #ifndef APP-NVUE */
		animation: aniscale 0.3s;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	@keyframes aniover {
		0% {
			background-color: rgba(0, 0, 0, 0);
		}

		100% {
			background-color: rgba(0, 0, 0, 0.3);
		}
	}

	@keyframes aniscale {
		0% {
			opacity: 0;
			transform: scale(0.7, 0.7);
		}

		100% {
			opacity: 1;
			transform: scale(1, 1);
		}
	}

	/* #endif */
</style>